<template>
  <!-- 图层 -->
  <div class="layer-panel-hh" ref="videoChatBox" id="phonePop">
    <div class="title">
      <span>现场视频</span>

      <div class="btn">
        <!-- 最小化显示 -->
        <i class="reduction" @click="minimizeShow"></i>
        <i class="fullScreen" @click="onScaleSwitch"></i>
        <i class="close" @click="close"></i>
      </div>
    </div>

    <!-- 多路播放-->
    <div class="content" v-if="multiPlayShow" :class="scaleSwitch?'paddingBox':''">
      <!-- 后期加了isOnline的判断:class="amplifieVideoUrl.isOnline===1?'':'gray'" -->
      <div v-for="(item, index) in 4" :key="index" class="videoBox">
        <div v-if="selectedVideos&&selectedVideos[index]" class="video">
          <div class="topBar">
            <i class="closeBtn" @click="delect(selectedVideos[index], index)"></i>
            <i
              :class="multiPlayShow?'amplifier':'shrink'"
              @click="amplifier(false, iframeSrcs[index], index)"
            ></i>
          </div>
          <iframe
            :src="iframeSrcs[index]"
            v-if="iframeSrcs"
            :id="'video-'+ index"
            width="100%"
            height="100%"
            webkitallowfullscreen="true"
            mozallowfullscreen="true"
            allowfullscreen="true"
            frameborder="no"
            border="0"
            style="margin: 0 0"
            scrolling="no"
          ></iframe>
        </div>
        <p v-else class="text">
          <span>暂无视频</span>
        </p>
      </div>
    </div>
    <!-- 放大播放  -->
    <div class="content" v-else>
      <!-- 后期加了isOnline的判断:class="amplifieVideoUrl.isOnline===1?'':'gray'" -->
      <div v-if="selectedVideos&&selectedVideos.length>0" class="bigVideo">
        <div class="topBar">
          <i class="closeBtn" @click="delect(amplifieVideoUrl)"></i>
          <i
            :class="multiPlayShow?'amplifier':'shrink'"
            @click="amplifier(true, iframeSrc)"
          ></i>
        </div>
        <iframe
          :src="iframeSrc"
          v-if="iframeSrc"
          id="hlsIframe"
          style="width:100%;height:100%;margin: 0 0;"
          width="100%"
          height="100%"
          webkitallowfullscreen="true"
          mozallowfullscreen="true"
          allowfullscreen="true"
          frameborder="no"
          border="0"
          scrolling="no"
        ></iframe>
      </div>
      <p v-else class="text">
        <span>暂无视频</span>
      </p>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'

type VideoItem = {
  id: string
  name: string
  x?: any,
  y?: any
  isOnline?: any
};

/**
 * 图层
 */
@Component({
  name: 'VideoPlayView',
  components: {}
})
export default class VideoPlayView extends Vue {
  private selectedVideos: VideoItem[] = [
    {
      id: '01',
      name: '测试视频1'
    },
    {
      id: '02',
      name: '测试视频2'
    },
    {
      id: '03',
      name: '测试视频3'
    },
    {
      id: '04',
      name: '测试视频4'
    }
  ];

  private iframeSrc = '';
  private iframeSrcs: string[] = [];

  private multiPlayShow = false;
  private scaleSwitch = false;

  private minimizeShow () {
    console.log('最小化播放窗口.')
  }

  private close () {
    VideoPlayView.reduction()
    this.scaleSwitch = false // 关闭后默认最小显示
  }

  private onScaleSwitch () {
    // 根据scaleSwitch参数放大或者缩小
    this.scaleSwitch = !this.scaleSwitch
    this.scaleSwitch ? this.fullScreen() : this.reduction()
  }

  private fullScreen () {
    const box = document.querySelector('.layer-panel-hh') as HTMLVideoElement
    box.style.setProperty('position', 'fixed', 'important')
    box.style.setProperty('width', '1920px', 'important')
    box.style.setProperty('height', '990px', 'important')
    box.style.setProperty('left', '0px', 'important')
    box.style.setProperty('top', '88px', 'important')
    box.style.setProperty('z-index', '1000', 'important')
    // 添加背景图
    const boxTitle = box.querySelector('.btn') as HTMLVideoElement
    boxTitle.classList.add('full_screenBg_bg')
  }

  private reduction () {
    const box = document.querySelector('.layer-panel-hh') as HTMLVideoElement
    box.style.setProperty('position', 'fixed', 'important')
    box.style.setProperty('width', '840px', 'important')
    box.style.setProperty('height', '640px', 'important')
    box.style.setProperty('left', '120px', 'important')
    box.style.setProperty('top', '178px', 'important')
    box.style.setProperty('z-index', '1000', 'important')
    // 移除背景图
    const boxTitle = box.querySelector('.btn') as HTMLVideoElement
    boxTitle.classList.remove('full_screenBg_bg')
  }

  // 放大/缩小显示
  private amplifier (multiPlayShow: boolean, iframeSrc: string, index: any) {
    console.log(`amplifier ==> multiPlayShow: ${multiPlayShow}, iframeSrc: ${iframeSrc}, index: ${index}`)
    this.multiPlayShow = multiPlayShow

    if (this.multiPlayShow) { // 多路播放
      this.iframeSrc = ''
    } else { // 单路播放
      this.iframeSrc = iframeSrc + '&singlePlay=true'
    }
    this.$forceUpdate()
  }

  // 获取视频流地址
  private playVideos () {
    if (this.selectedVideos.length === 0) {
      return
    }
    console.log('playVideos ==> iframeSrcs-01: ', this.iframeSrcs)
    this.iframeSrcs = this.selectedVideos.map((item: VideoItem, index: number) => {
      console.log('playVideos ==> item: ', item)
      return this.getPlayUrl(item.id)
    })
    console.log('playVideos ==> iframeSrcs-02: ', this.iframeSrcs, 'firstVal: ', this.iframeSrcs[0])
    this.amplifier(this.selectedVideos.length > 1, this.iframeSrcs[0], 0)
    this.$forceUpdate()
  }

  // 获取视频url
  private getPlayUrl (camId: string) {
    let hlsUrl = ''
    if (camId === '01') {
      hlsUrl = 'http://1257120875.vod2.myqcloud.com/0ef121cdvodtransgzp1257120875/3055695e5285890780828799271/v.f230.m3u8'
    } else if (camId === '02') {
      hlsUrl = 'http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8'
    }
    return `/deps/HLS/index.html?hls=${hlsUrl}&len=${this.selectedVideos.length}`
  }

  private mounted () {
    this.playVideos()
  }

  private beforeDestroy () {
    this.selectedVideos = []
    this.multiPlayShow = false
  }
}

</script>
<style lang="less" scoped>
@url: '../assets/video-play';
.layer-panel-hh {
  width: 840px;
  background: url('@{url}/video_bg.png') no-repeat;
  background-size: 100% 100%;
  height: 640px;
  top: 120px;
  left: 178px;
  position: fixed;
  z-index: 301;

  .btn {
    position: absolute;
    display: flex;
    top: -8px;
    right: -15px;
    height: 47px;
    width: 175px;

    .close {
      position: absolute;
      right: 1px;
      top: -3px;
      width: 57px;
      height: 47px;
      cursor: pointer;
      background: url('@{url}/menu_magnify_bg_active_03.png') no-repeat center /
        100% 100%;

      &:hover {
        background: url('@{url}/menu_shrink_active_03.png') no-repeat center /
          100% 100%;
      }
    }

    .fullScreen {
      position: absolute;
      right: 58px;
      top: -3px;
      width: 45px;
      height: 47px;
      cursor: pointer;
      background: url('@{url}/menu_magnify_bg_active_02.png') no-repeat center /
        100% 100%;

      &:hover {
        background: url('@{url}/menu_shrink_active_02.png') no-repeat center /
          100% 100%;
      }
    }

    .reduction {
      position: absolute;
      right: 103px;
      top: -3px;
      width: 73px;
      height: 47px;
      cursor: pointer;
      background: url('@{url}/menu_magnify_bg_active_01.png') no-repeat center /
        100% 100%;

      &:hover {
        background: url('@{url}/menu_shrink_active_01.png') no-repeat center /
          100% 100%;
      }
    }
  }

  .title {
    position: relative;
    padding: 0px 40px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 30px;
    font-weight: 600;
    height: 70px;
    box-sizing: border-box;

    span {
      display: block;
      width: 340px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background-image: -webkit-linear-gradient(top, #f5f7c3 10%, #00e4ff);
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      text-fill-color: transparent;
    }

    .full_screenBg_bg {
      .fullScreen {
        background: url('@{url}/menu_magnify_bg_02.png') no-repeat center / 100%
        100%;

        &:hover {
          background: url('@{url}/menu_magnify_active_02.png') no-repeat center /
            100% 100%;
        }
      }
    }
  }

  .paddingBox {
    padding-left: 20px;
  }

  .content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    // height: 544px;
    height: 85%;
    // padding: 10px 24px 50px 24px;
    // // box-sizing: border-box;
    // background: url("@{url}/centerBg.png") no-repeat;
    // background-size: 100% 100%;
    .bigVideo {
      width: 98%;
      height: 100%;
      position: relative;
      border: 1px solid #059ece;
      margin-left: 6px;

      &:hover {
        .topBar {
          display: block;
        }
      }

      .topBar {
        width: 98px;
        height: 52px;
        display: none;
        position: absolute;
        left: 45%;
        top: -4px;
        z-index: 999;
        background: url('@{url}/bg_icon.png') no-repeat center / 100% 100%;

        .closeBtn {
          width: 18px;
          height: 18px;
          cursor: pointer;
          background: url('@{url}/qx_btn.png') no-repeat center / 100% 100%;
          display: inline-block;
          margin: 17px 0px 0px 20px;

          &:hover {
          }
        }

        .amplifier {
          width: 18px;
          height: 18px;
          cursor: pointer;
          background: url('@{url}/fd_btn.png') no-repeat center / 100% 100%;
          display: inline-block;
          margin: 17px 0px 0px 20px;

          &:hover {
          }
        }

        .shrink {
          width: 18px;
          height: 18px;
          cursor: pointer;
          background: url('@{url}/sx_btn.png') no-repeat center / 100% 100%;
          display: inline-block;
          margin: 17px 0px 0px 20px;

          &:hover {
          }
        }
      }
    }

    .text {
      font-size: 16px;
      color: #fff;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #059ece;
    }

    .videoBox {
      width: 48%;
      height: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 10px;
      margin-top: 10px;

      &:nth-child(3),
      &:nth-child(4) {
        margin-top: 0px;
      }

      .video {
        width: 100%;
        height: 100%;
        position: relative;
        border: 1px solid #059ece;

        &:nth-child(1):hover {
          .topBar {
            display: block;
          }
        }

        &:nth-child(2):hover {
          .topBar {
            display: block;
          }
        }

        &:nth-child(3):hover {
          .topBar {
            display: block;
          }
        }

        &:nth-child(4):hover {
          .topBar {
            display: block;
          }
        }

        .topBar {
          width: 98px;
          height: 52px;
          display: none;
          position: absolute;
          left: 38%;
          top: -4px;
          z-index: 999;
          background: url('@{url}/bg_icon.png') no-repeat center / 100% 100%;

          .closeBtn {
            width: 18px;
            height: 18px;
            cursor: pointer;
            background: url('@{url}/qx_btn.png') no-repeat center / 100% 100%;
            display: inline-block;
            margin: 17px 0px 0px 20px;

            &:hover {
            }
          }

          .amplifier {
            width: 18px;
            height: 18px;
            cursor: pointer;
            background: url('@{url}/fd_btn.png') no-repeat center / 100% 100%;
            display: inline-block;
            margin: 17px 0px 0px 20px;

            &:hover {
            }
          }

          .shrink {
            width: 18px;
            height: 18px;
            cursor: pointer;
            background: url('@{url}/sx_btn.png') no-repeat center / 100% 100%;
            display: inline-block;
            margin: 17px 0px 0px 20px;

            &:hover {
            }
          }
        }
      }
    }
  }
}
</style>
